import React, {Component, useEffect, useState} from 'react';
import axios from "axios";
import {NavLink,useHistory} from "react-router-dom";

export default function NowPlaying(props) {

    const [list, setList] = useState([])

    useEffect(() => {
        axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=1886067",
            method:'get',
            headers: {
                'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.2.1","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.film.list'
            }
        }).then((res)=>{
            console.log(res.data.data.films)
            setList(res.data.data.films)
        })
    }, []);

    const handlaChangePage = (id) => {
        console.log('handlaChangePage')

        // window.location.hash="#/detail/"+id
        props.history.push('/detail/'+id)
        //一样
        history.push('/detail/'+id)

        console.log(props)
    }

    //hooks封装的路由跳转
    const history = useHistory()

    return (
        <div>
            {
                list.map(item=>
                <li key={item.filmId} onClick={()=>{handlaChangePage(item.filmId)}}>
                    {item.name}
                {/*<NavLink to={'/detail/'+item.filmId}>{item.name}</NavLink>*/}
                </li>

                )
            }
        </div>
    )
}
